<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片模态框</title>
    <style>
        #myImg{
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;

            cursor: pointer;

            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        #myImg:hover{
            opacity: 0.7;
        }

        .modal{
            display: none;
            position: fixed;
            z-index:1;
            left:0;
            top:0;
            width:100%;
            height:100%;
            padding-top:50px;
            overflow: auto;
            background-color:rgb(0,0,0);
            background-color:rgba(0,0,0,0.9);
        }
        .modal-content{
            margin:auto;
            display: block;
            width:100%;
            max-width: 700px;
        }
        #caption{
            margin:auto;
            display: block;
            width:80%;
            max-width:700px;
            text-align: center;
            color: #ccc;
            padding:10px 0;
            height:150px;
        }
        .modal-content,#caption{
            -webkit-animation:zoom 0.6s;
            -o-animation:zoom 0.6s;
            animation:zoom 0.6s;
        }
        @-webkit-keyframes zoom {
            from{
                -webkit-transform: scale(0.1);
            }
            to{
                -webkit-transform: scale(1);
            }
        }
        @keyframes zoom {
            from{
                transform: scale(0.1);
            }
            to{
                transform: scale(1);
            }
        }

        .close{
            position: absolute;
            top:15px;
            right:35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight:bold;
            transition: 0.3s;
        }
        .close:hover,.close:focus{
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px){
            .modal-content {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<h2>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。<br/>
    首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<br/>
    然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
</p>
<img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

<!--The modal-->
<div id="myModal" class="modal">
    <span class="close">×</span>
    <img class="modal-content" id="img01"/>
    <div id="caption"></div>
</div>

<script>
    var modal=document.getElementById('myModal');
    var img=document.getElementById('myImg');
    var modalImg=document.getElementById('img01');
    var captionText=document.getElementById('caption');
    img.onclick=function(){
        modal.style.display='block';
        modalImg.src=this.src;
        modalImg.alt=this.alt;
        captionText.innerHTML=this.alt;
    };
    var span=document.getElementsByClassName('close')[0];
    span.onclick=function(){
        modal.style.display='none';
    }

</script>
</body>
</html>
